
import { Tabbar } from 'react-vant'
import {useNavigate, Outlet, useLocation} from 'react-router-dom'
import {useEffect, useState} from 'react'
import {useSelector,useDispatch} from 'react-redux'
import {changeCount,changeIsShopbagCountLoad} from '../store/store'
import axios from 'axios'

function Main() {
    // let getShopbagCount = () => {
    //     axios({
    //         method:'get',
    //         url:'/shopcartCount'
    //     }).then(res => {
    //         if (res.data.code==700) {
    //             dispath(changeCount(0))
    //             dispath(changeIsShopbagCountLoad(false))
    //         }else if (res.data.code==4000) {
    //             dispath(changeCount(res.data.result))
    //             dispath(changeIsShopbagCountLoad(true))
    //         }
    //     })
    // }


    //数据
    let shopbagCount = useSelector(state => state.public.count)
    let tarBarIcon = [
        {
            inactive: require('../images/home.png'),
            active: require('../images/home_active.png'),
            title:'首页',
            path:'/'
        },
        {
            inactive: require('../images/menu.png'),
            active: require('../images/menu_active.png'),
            title:'菜单',
            path:'/Menu'
        },
        {
            inactive: require('../images/shopbag.png'),
            active: require('../images/shopbag_active.png'),
            title:'购物袋',
            path:'/Shopbag',
            badge:shopbagCount > 0 ? shopbagCount : ''
        },
        {
            inactive: require('../images/my.png'),
            active: require('../images/my_active.png'),
            title:'我的',
            path:'/My'
        },
    ]
    let [activeIndex,setActiveIndex] = useState(0)
    let isShopbagCountLoad = useSelector(state => state.public.shopbagCount)

    //引入方法
    let navigate = useNavigate()
    let location = useLocation()
    let dispath = useDispatch()

    //方法
    let changeRouter = index => {
        setActiveIndex(index)
        navigate(tarBarIcon[index].path)
    }
    let getShopbagCount = () => {
		axios({
			method: 'get',
			url: '/findAllShopcart'
		}).then(res => {
			if (res.data.code==700) {
                dispath(changeCount(0))
                dispath(changeIsShopbagCountLoad(false))
            }else if (res.data.code==5000) {
                let totalCount = 0
				res.data.result.forEach(item => {
					totalCount += item.count
				})
				dispath(changeCount(totalCount))
                dispath(changeIsShopbagCountLoad(true))
            }
		})
	}

    //周期hook
    useEffect(() => {
        tarBarIcon.forEach((item,index) => {
            if (item.path===location.pathname) {
                setActiveIndex(index)
            }
        })
        if (!isShopbagCountLoad) {
            getShopbagCount()
        }
    },[])

    return (
        <div className="main full">
            <Tabbar value={activeIndex} activeColor='#0C34BA' inactiveColor='#646566' onChange={(index) => changeRouter(index)}>
                {
                    tarBarIcon.map((item,index) => {
                        return (
                            <Tabbar.Item badge={{content:item.badge}} icon={ac => <img alt='tabbar' src={ac ? item.active : item.inactive} />} key={index}>{item.title}</Tabbar.Item>
                        )
                    })
                }
            </Tabbar>
            <Outlet></Outlet>
        </div>
    )
}
export default Main